import InputBox from './InputBox';

const list = [
  {
    id: 10,
    value: '本周免费',
  },
  {
    id: 11,
    value: '新手推荐',
  },
  {
    id: 0,
    value: '全部',
  },
  {
    id: 3,
    value: '坦克',
  },
  {
    id: 1,
    value: '战士',
  },
  {
    id: 4,
    value: '刺客',
  },
  {
    id: 2,
    value: '法师',
  },
  {
    id: 5,
    value: '射手',
  },
  {
    id: 6,
    value: '辅助',
  }
];

const InputArea = ({current, onSelect, onChange, value}) => {

  const firstList = list.slice(0, 2).map(item => (
    <li key={item.id} className="flex text-[14px] text-[rgb(104,104,105)] gap-[6px] w-[80px]">
      <input type="radio" name="hero" className="w-[16px]" id={item.value} checked={item.id===current} onChange={() => onSelect(item.id)}/>
      <label htmlFor={item.value} className="cursor-pointer select-none">{item.value}</label>
    </li>
  ));

  const secondList = list.slice(2).map(item => (
    <li key={item.id} className="flex text-[14px] text-[rgb(104,104,105)] gap-[6px] w-[80px]">
      <input type="radio" name="hero" className="w-[16px]" id={item.value} checked={item.id===current} onChange={() => onSelect(item.id)}/>
      <label htmlFor={item.value} className="cursor-pointer select-none">{item.value}</label>
    </li>
  ));
  

  return (
    <div className="flex relative h-[100px] overflow-hidden rounded-[8px]">
      <div className="bg-[#2c88e2] text-[#fff] flex flex-col items-center justify-around px-2 w-[90px]">
        <p>综合</p>
        <p>游戏职业</p>
      </div>
      <div className="bg-[#efefef] flex-1 pl-[30px] flex flex-col justify-around">
        <ul className="flex gap-[20px]">
          {firstList}
        </ul>
        <ul className="flex gap-[20px]">
          {secondList}
        </ul>
      </div>
      <InputBox value={value} onChange={onChange}/>
    </div>
  );
};

export default InputArea;